﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        a#show-popup {
            margin: 20px 0 0 20px;
            float: left;
            text-decoration: none;
        }

        /*div#popup-bg {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99;
            background: #000;
            display: none;
        }*/

        /*div#popup {
            width: 890px;
            height: 480px;
            border: 1px solid rgba(0,0,0,.2);
            z-index: 999;
            display: none;
            background: #FFF;
            box-shadow: 0 3px 9px rgba(0,0,0,.5);
        }*/

        /*div#popup-header {
            width: 890px;
            border-bottom: 1px solid #e5e5e5;
            display: block;
            padding-bottom: 30px;
            padding: 10px;
        }*/

        /*span#popup-close {
            cursor: pointer;
            color: #FFF;
            font-size: 12px;
            position: absolute;
            top: -2px;
            right: 10px;
            z-index: 9999;
        }*/

        /*div#popup-content {
            width: 890px;
            float: left;
            margin-top: 15px;
            padding: 5px;
        }*/

        /*#popup #popup-content #info {
            background-color: #9CC;
            height: 439px;
            width: 670px;
        }

        #sub {
            text-align: center;
            padding: 20px;
        }

        #popup #popup-content #info table tr td #form1 #add {
            max-height: 80px;
            max-width: 660px;
        }

        #form1 #add {
            width: 660px;
        }*/
    </style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
    <link href="css/demo.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>

    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>

    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    <script language="javascript">
        $(document).ready(function () {
            (function ($) {
                //Căn giữa phần tử thuộc tính là absolute so với phần hiển thị của trình duyệt, chỉ dùng cho phần tử absolute đối với body
                $.fn.absoluteCenter = function () {
                    this.each(function () {
                        var top = -($(this).outerHeight() / 2) + 'px';
                        var left = -($(this).outerWidth() / 2) + 'px';
                        $(this).css({ 'position': 'absolute', 'position': 'fixed', 'margin-top': top, 'margin-left': left, 'top': '50%', 'left': '50%' });
                        return this;
                    });
                }
            })(jQuery);

            $('a#show-popup').click(function () {
                //Đặt biến cho các đối tượng để gọi dễ dàng
                var bg = $('div#popup-bg');
                var obj = $('div#popup');
                var btnClose = obj.find('#popup-close');
                //Hiện các đối tượng
                bg.animate({ opacity: 0.2 }, 0).fadeIn(1000); //cho nền trong suốt
                obj.fadeIn(1000).draggable({ cursor: 'move', handle: '#popup-header' }).absoluteCenter(); //căn giữa popup và thêm draggable của jquery UI cho phần header của popup
                //Đóng popup khi nhấn nút
                btnClose.click(function () {
                    bg.fadeOut(1000);
                    obj.fadeOut(1000);
                });
                //Đóng popup khi nhấn background
                bg.click(function () {
                    btnClose.click(); //Kế thừa nút đóng ở trên
                });
                //Đóng popup khi nhấn nút Esc trên bàn phím
                $(document).keydown(function (e) {
                    if (e.keyCode == 27) {
                        btnClose.click(); //Kế thừa nút đóng ở trên
                    }
                });
                return false;
            });
        });
    </script>


    <title>Untitled Document</title>
</head>

<body>
    <a href="#" id="show-popup">click here</a>
    <div id="popup-bg"></div>
    <div id="popup">
        <div id="popup-header">
            <button type="button" id="popup-close">
                <span class="glyphicon glyphicon-remove"></span>
            </button>
            <h4>Thêm nhà trọ mới</h4>
        </div>
        <div id="popup-content">
            <div class="form addhouseform" role="form">
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <label for="inputtennhatro">Tên nhà trọ</label>
                        <input type="text" class="form-control" id="inputtennhatro" placeholder="Nhập tên nhà trọ">
                    </div>
                    <div class="form-group">
                        <label for="inputmota">Mô tả</label>
                        <input type="text" class="form-control" id="inputmota" placeholder="Nhập mô tả nhà trọ">
                    </div>
                    <div class="form-group">
                        <label for="inputdiachi">Địa chỉ</label>
                        <input type="text" class="form-control" id="inputdiachi" placeholder="Nhập địa chỉ nhà trọ">
                    </div>
                    <div class="form-group">
                        <label for="inputthongtin">Thông tin nhà trọ</label>
                        <div class="form-inline" role="form">
                            <input type="text" class="form-control" id="inputgia" placeholder="Giá" />
                            <input type="text" class="form-control" id="inputchieudai" placeholder="Chiều dài (m)" />
                            <input type="text" class="form-control" id="inputchieurong" placeholder="Chiều rộng (m)" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <label for="uploadhinh">Hình nhà trọ</label>
                        <div class="panel" style="background-color: rgb(229, 229, 229)">
                            <div class="uploadpicture">
                                <p>Upload hình nhà trọ</p>
                                <div class="btn btn-info">
                                    <span>Tải hình</span>
                                    <input type="file" id="exampleInputFile" />

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12">
                    <div style="float: right">
                        <div style="text-align: right; margin-top: 20px; margin-bottom: 15px; width: 100%;">
                            <button type="submit" class="btn btn-default ">Hủy</button>
                            <button type="submit" class="btn btn-info ">Tiếp tục</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
